<template>
	<view class="content">
		<view class="dialog" v-if="is_dialog">
			<view class="dialog-view">
				<text class="dialog-title">提示</text>
				<image src="../../static/image/child-unbind.png" mode=""></image>
				<text class="dialog-tips">功能开发中，敬请期待！</text>
				<view class="ok" @click="ok">好的</view>
			</view>
		</view>
		<view class="cont">
			<checkbox-group @change="checkboxChange">
				<label v-for="(item,index) in datas" :key="index">
					<view class="cont-item">
						<view class="children-left">
							<headimg :realSrc="item.avatar"></headimg>
							<view class="childmsg">
								<view class="stumsg">{{item.nicheng}}</view>
								<view class="schoolmsg">{{item.childmsg}}</view>
							</view>
						</view>
						<view class="radio-stu">
							<checkbox :value="item.student_id" />
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="button" @click="onbind()">解除绑定</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		data() {
			return {
				is_dialog: false,
				datas: [],
				student_id: ''
			}
		},
		onLoad() {
			this.getChild();
		},
		methods: {
			// 获取绑定孩子列表
			getChild() {
				this.$zapi.apiPost('user/currency.Parents/childlist').then(res => {
					if(res.data.code == 200) {
						var list = res.data.data;//我加入群列表的信息
						list.forEach((item, key) => {
							item.nicheng = item.nicheng ? item.nicheng : '未设置昵称';
							if (item.school_info && item.school_info.length > 0 && item.school_info[0].schoolid > 0) {
								let school = item.school_info[0]
								item.gradeName = school.grade ? util.getgradeName(school.grade) : '未知年级';
								item.school_name = school.school_name ? school.school_name : '未知学校';
								item.childmsg = school.class_name ? item.school_name + '（' + item.gradeName +
									school.class_name + '）' : item.school_name + '（未加入班级）';
							} else {
								item.childmsg = '未绑定学校';
							}
						})
						this.datas = list;
					} else {
						this.datas = [];
					}
				})
			},
			onbind(student_id) {
				// this.is_dialog = !this.is_dialog;
				if(this.student_id == '') {
					uni.showToast({
						title: '请先选择需要解绑的孩子',
						icon: 'none'
					})
				} else {
					var data = {
						student_id: this.student_id
					}
					this.$zapi.apiPost('user/currency.Parents/untieChildren',data).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							this.getChild();
						}
					})
				}
			},
			checkboxChange: function (e) {
                this.student_id = e.target.value;
            },
			ok() {
				this.is_dialog = !this.is_dialog;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FAFAFA;
	}
	.content {
		width: 100%;
		position: absolute;
		padding-bottom: 110upx;
	}
	.cont{
		width: 100%;
	}
	.cont-item{
		width: calc(100% - 60upx);
		padding: 40upx 20upx 40upx 40upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10upx;
		background-color: #FFFFFF;
		
		.children-left {
			width: 82%;
			display: flex;
		
			.head_image {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
			}
		
			.childmsg {
				color: #333333;
				margin-left: 20upx;
				width: calc(100% - 100upx);
		
				.stumsg {
					color: #333333;
					font-size: 34upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
		
				.schoolmsg {
					color: #666666;
					font-size: 26upx;
				}
			}
		}
	}
	
	checkbox-group label{
		padding-right: 0;
	}
	checkbox{
		transform: scale(0.75);
	}
	.wx-checkbox-input{
		border: 2upx solid #999999 !important;
		border-radius: 50% !important;
	}
	.wx-checkbox-input.wx-checkbox-input-checked{
		border: 2upx solid #FF9900 !important;
		background: #FF9900 !important;
	}
	.wx-checkbox-input.wx-checkbox-input-checked:before{
		color: #FFFFFF;
	}
	.button{
		margin: 90upx 30upx 0;
		background: #FF9900;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 8upx;
	}
	/* 弹框 */
	.dialog{
		position: fixed;
		z-index: 600;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}
	.dialog-view{
		width: 556upx;
		height: 646upx;
		margin-left: 98upx;
		position: absolute;
		top: 160upx;
		background: #FFFFFF;
		border-radius: 44upx;
	}
	.dialog-title{
		color: #333333;
		font-size: 42upx;
		height: 110upx;
		line-height: 110upx;
		border-bottom: 2upx solid #E5E5E5;
		display: flex;
		justify-content: center;
	}
	.dialog-view image{
		width: 186upx;
		height: 184upx;
		margin-left: 186upx;
		margin-top: 52upx;
	}
	.dialog-tips{
		color: #999999;
		font-size: 38upx;
		display: flex;
		justify-content: center;
		margin-top: 64upx;
	}
	.ok{
		color: #00ACFE;
		font-size: 34upx;
		height: 100upx;
		line-height: 100upx;
		border-top: 2upx solid #E5E5E5;
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>
